<template>
  <div class="page-pageLayout">
    <page-header :title="title" :logo="logo" :avatar="avatar">
      <slot slot="content" name="headerContent"></slot>
      <slot slot="action" name="action"></slot>
      <slot slot="extra" name="extra"></slot>
    </page-header>
    <div class="content">
      <div :class="['page-header-index-wide']">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
  import PageHeader from './PageHeader'

  export default {
    name: "LayoutContent",
    components: {
      PageHeader
    },
    props: {
      logo: {
        type: String,
        default: null
      },
      title: {
        type: String,
        default: null
      },
      avatar: {
        type: String,
        default: null
      },
      extraImage: {
        type: String,
        default: null
      },
    },
  }
</script>
<style lang="scss" scoped>
  .page-pageLayout {
    .content {
      margin: 1em 1em 0;

      .link {
        margin-top: 16px;

        &:not(:empty) {
          margin-bottom: 16px;
        }
        a {
          margin-right: 32px;
          height: 24px;
          line-height: 24px;
          display: inline-block;

          i {
            font-size: 24px;
            margin-right: 8px;
            vertical-align: middle;
          }
          span {
            height: 24px;
            line-height: 24px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .page-menu-search {
      text-align: center;
      margin-bottom: 16px;
    }
    .page-menu-tabs {
      margin-top: 48px;
    }
    .page-header[data-v-6740ec88] {
      margin: 0px 24px 0;
    }
  }
</style>
